<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams"
                @handle-search="getList">
      <el-form :model="searchForm"
               inline>
        <el-form-item>
          <el-input v-model="searchForm.order_id"
                    clearable
                    @change="getList"
                    class="w-220px"
                    placeholder="订单号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.shop_id"
                    clearable
                    @change="getList"
                    class="w-220px"
                    placeholder="店铺ID" />
        </el-form-item>
        <!-- <el-form-item>
                    <el-select v-model="searchForm.isProxy" placeholder="是否存在代理" clearable @change="getList"
                        class="w-220px">
                        <el-option label="否" :value="0" />
                        <el-option label="是" :value="1" />
                    </el-select>
                </el-form-item> -->
        <el-form-item>
          <el-select v-model="searchForm.pay_type"
                     placeholder="是否付费"
                     clearable
                     @change="getList"
                     class="w-220px">
            <el-option label="否"
                       :value="7" />
            <el-option label="是"
                       :value="16" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.isRefund"
                     placeholder="是否退款"
                     clearable
                     @change="getList"
                     class="w-220px">
            <el-option label="否"
                       :value="0" />
            <el-option label="是"
                       :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.isSettle"
                     placeholder="服务市场是否结算"
                     clearable
                     @change="getList"
                     class="w-220px">
            <el-option label="否"
                       :value="0" />
            <el-option label="是"
                       :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.proxyPhone"
                    class="w-220px"
                    clearable
                    @change="getList"
                    placeholder="代理手机号" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="times"
                          type="daterange"
                          unlink-panels
                          range-separator="-"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          :shortcuts="shortcuts"
                          @change="gerTimeData" />
        </el-form-item>
      </el-form>
    </SearchForm>
    <el-upload v-model:file-list="fileList"
               class="upload-demo"
               v-if="storage.get('userInfo')?.roleName == 'admin' || storage.get('userInfo')?.roleName == 'adminSp'"
               action="http://admin.doulingyang.cn/dlyadminapi/orders/uporderFile"
               multiple
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :before-remove="beforeRemove"
               :limit="3"
               :headers="{ 'Authorization': 'Bearer ' + userStore.token }"
               :on-exceed="handleExceed">
      <el-button type="primary">上传服务市场订单</el-button>
      <!-- <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500KB.
                </div>
            </template> -->
    </el-upload>
    <div class="page-card h-full"
         v-loading="loading">
      <el-table :data="tableData">
        <el-table-column label="ID"
                         prop="_id"
                         align="center" />
        <el-table-column label="订单ID"
                         prop="order_id"
                         align="center" />
        <el-table-column label="店铺ID"
                         prop="shop_id"
                         align="center" />
        <el-table-column :label="`订单信息\n(合计: ${(summing.allPayNum / 100).toFixed(2)}元)`"
                         align="left"
                         width="260">
          <template #default="{ row }">
            <p>￥{{ (row.push_sku_info.price / 100).toFixed(2) }}</p>
            <p>{{ row.push_sku_info.title }}</p>
          </template>
        </el-table-column>

        <el-table-column label="服务起止时间"
                         align="left">
          <template #default="{ row }">
            <p>{{ moment(row.service_start_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>

            <p>{{ moment(row.service_end_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>
          </template>
        </el-table-column>

        <el-table-column label="推广链接ID"
                         prop="proxyLinkId"
                         align="center">
          <template #default="{ row }">
            <p v-if="row.proxyLinkId">
              {{ row.proxyLinkId.identification }}
              <el-link type="primary"
                       @click="gotolinkpage(row.proxyLinkId)">查看</el-link>
            </p>
            <p v-else> / </p>
          </template>
        </el-table-column>
        <el-table-column label="代理名"
                         prop="proxyId"
                         align="center">
          <template #default="{ row }">
            <p v-if="row.proxyId">
              {{ row.proxyId.userName }}
              <el-link type="primary"
                       @click="gotoadminuserpage(row.proxyId)">查看</el-link>
            </p>
            <p v-else> / </p>
          </template>
        </el-table-column>
        <el-table-column label="代理手机号"
                         prop="proxyId.phone"
                         align="center" />
        <el-table-column label="是否退款"
                         prop="isRefund"
                         align="center">
          <template #default="{ row }">
            {{ row.isRefund ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="服务市场结算"
                         prop="isRefund"
                         align="center">
          <template #default="{ row }">
            {{ row.isSettle ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column :label="`服务市场结算金额\n(合计: ${(summing.allSettleNum).toFixed(2)}元)`"
                         prop="settleAmount"
                         align="center" />
        <el-table-column label="创建时间"
                         prop="createTime"
                         align="center" />
      </el-table>
      <Pagination :pageable="page"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { serviceMarketList } from '@/api/orders';
import { useRouter } from 'vue-router';
import moment from 'moment';
import { shortcuts } from '@/utils/shearData';
import { useUserStore } from '@/store';
import { storage } from '@/utils/storage';

const userStore = useUserStore();

const router = useRouter();
const times = ref([]);
let fileList = ref([]);
const handleRemove = (file: any, fileList: any) => {
  console.log(file, fileList);
};
const handlePreview = (file: any) => {
  console.log(file);
};
const handleExceed = (files: any, fileList: any) => {
  console.log(files, fileList);
};

const beforeRemove = (file: any, fileList: any) => {
  console.log('file', file, fileList);
};

const gerTimeData = (val: any) => {
  if (val) {
    searchForm.start_time = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00';
    searchForm.end_time = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59';
  } else {
    searchForm.start_time = '';
    searchForm.end_time = '';
  }
};

const searchForm = reactive({
  phone: '',
  shop_id: '',
  shop_name: '',
  shop_phone: '',
  user_phone: '',
  isBuy: '',
  isProxy: '',
  proxyPhone: '',

  order_id: '',
  isRefund: '',
  pay_type: '',
  start_time: '',
  end_time: '',
  isSettle: ''
});
const {
  tableData,
  page,
  summing,
  loading,
  resetParams,
  getList,
  handleCurrentChange,
  handleSizeChange
} = useTable({
  apiFn: serviceMarketList,
  params: searchForm
});
console.log(tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange);
const gotolinkpage = (row: any) => {
  console.log(row);
  router.push({
    path: '/promotion/link',
    query: {
      id: row._id
    }
  });
};
const gotoadminuserpage = (row: any) => {
  console.log(row);
  router.push({
    path: '/subaccount/agents',
    query: {
      id: row._id
    }
  });
};
</script>

<style lang="scss" scoped></style>
